let cartList = JSON.parse(localStorage.getItem('list'));
let userId = localStorage.getItem('userId');
//     || [
//     {
//         dishId: 1,
//         status: true, // 是否选中
//         imagesRoute: 'img/img1.jpeg',
//         dishName: '标题',
//         dishPrice: 100,
//         count: 3, // 购买3件
//         // total: 16 // 库存
//     }
// ];

function submitOrder(list, totalPrice) {
    $.ajax({
        url: $("#PageContext").val() + "/order/submitOrder",
        type: "post",
        dataType: "json",
        data: {
            userId: userId,
            cartList: list,
            totalPrice: totalPrice
        },
        error: function () {
            alert("提交失败");
        }
    });
}

function editCart(dishId, count) {
    $.ajax({
        url: $("#PageContext").val() + "/cart/editCart",
        type: "post",
        dataType: "json",
        data: {
            userId: userId,
            dishId: dishId,
            count: count,
            flag: 10
        },
        error: function () {
            alert("添加失败");
        }
    });
}

function delCart(dishId) {
    $.ajax({
        url: $("#PageContext").val() + "/cart/delCart",
        type: "post",
        dataType: "json",
        data: {
            userId: userId,
            dishId: dishId
        },
        error: function () {
            alert("删除失败");
        }
    });
}

function clearCart() {
    $.ajax({
        url: $("#PageContext").val() + "/cart/clearCart",
        type: "post",
        dataType: "json",
        data: {
            userId: userId,
        },
        error: function () {
            alert("删除失败");
        }
    });
}

var content = document.querySelector('.content');

// 查 -- 整合数据，拼接在页面上 --- 渲染数据
renderHTML();

function renderHTML() {
    // 渲染
    // 设置需要的变量（勾选的数量、总件数、总价格）
    // 勾选的数量
    let totalSelnum = 0;
    // 总件数
    let totalSum = 0;
    // 总价格
    let totalPrice = 0;

    cartList.forEach(item => {
        // 判断数组中的status项是否为true
        if (item.status) {
            // 勾选的数量叠加
            totalSelnum++;
            // 总件数
            totalSum += item.count;
            // 总价格
            totalPrice += item.count * item.dishPrice;
        }
    });
    // 遍历数组
    let str = ``;

    // 拼接全选的数据
    str += `<div class="top">
                <input class="toggleAll" type="checkbox" ${(checked =
        totalSelnum === cartList.length ? 'checked' : '')}/> 全选</div>
                <ul>`
    // 拼接列表数据
    cartList.forEach(item => {
        str += `    
                    <li>
                        <div class="status">
                            <input type="checkbox" ${(checked =
            item.status === true ? 'checked' : '')} class="checkbox" data-id = "${item.dishId}"/>
                        </div>
            <div class="show">
              <img src="${item.imagesRoute}"
                alt="" />
            </div>
            <div class="title">${item.dishName}</div>
            <div class="price">单价￥ ${item.dishPrice}</div>
            <div class="count">
              <button class = "sub" data-id = "${item.dishId}">-</button>
              <input type="text" value="${item.count}" />
              <button class = "add" data-id = "${item.dishId}">+</button>
            </div>
            <div class="sub">总价￥ ${(item.dishPrice * item.count).toFixed(
            2
        )}</div>
            <div class="destory">
              <button class="del" data-id = "${item.dishId}">删除</button>
            </div>
          </li>`
    });
    // 拼接结算数据
    str += `</ul>    
        <div class="bottom">
          <div class="totalSelnum">总件数 : ${totalSum}</div>
          <div class="btns">
            <button class='clear'>清空购物车</button>
            <button class="buy" ${
        !totalSelnum ? 'disabled' : ''
    } data-price = "${totalPrice}">去结算</button>
            <button class="removeComplete" ${
        !totalSelnum ? 'disabled' : ''
    }>删除所有已选中</button>
          </div>
          <div class="totalPrice">总价格 : ￥ <span>${totalPrice.toFixed(
        2
    )}</span></div>
        </div>`;
    // 渲染
    content.innerHTML = str;
    localStorage.setItem('list', JSON.stringify(cartList))
}

// 利用事件委托处理删改增
// 判断当前点击的元素的className是否是需要触发事件的元素
content.onclick = function (e) {
    // 全选
    // 利用事件委托
    if (e.target.className === 'toggleAll') {
        cartList.forEach(item => {
            item.status = e.target.checked
        });
        renderHTML()
    }

    /*清空购物
       修改数据
       渲染页面
    */
    if (e.target.className === 'clear') {
        if (confirm('请确定要清空购物车吗？')) {
            clearCart();
            cartList = [];
            renderHTML();
        }
    }
    /*
           结算
           修改数据
           渲染页面
        */
    if (e.target.className === 'buy') {
        var list = "";
        cartList = cartList.filter(item => {
            if (item.status) {
                list += item.dishId + ",";
            }
            return !item.status
        });
        submitOrder(list, e.target.dataset.price);
        console.log(e.target.dataset.price);
        renderHTML();
    }
    /*
          删除已经选中
          修改数据
          渲染页面
        */
    if (e.target.className === 'removeComplete') {
        if (confirm('请确定要删除购物车吗？')) {
            cartList = cartList.filter(item => {
                if (item.status) {
                    delCart(item.dishId);
                }
                return !item.status
            });
        }
        renderHTML()
    }
    /*
          每一项的+
          修改数据
          渲染页面
        */
    if (e.target.className === 'add') {
        let add = cartList.find(item => {
            if (item.dishId == e.target.dataset.id) {
                editCart(item.dishId, item.count + 1);
            }
            return item.dishId == e.target.dataset.id
        });
        // if (add.count < add.total) {
        add.count++;
        // }
        renderHTML()
    }
    /*
          每一项的 -
          修改数据
          渲染页面
        */
    if (e.target.className === 'sub') {
        let sub = cartList.find(item => {
            if (item.dishId == e.target.dataset.id) {
                if (item.count - 1 < 1) {
                    if (confirm('你确定要删除这一项吗？')) {
                        cartList = cartList.filter(item => {
                            if (item.dishId == e.target.dataset.id)
                                delCart(item.dishId);
                            return item.dishId != e.target.dataset.id;
                        });
                        renderHTML();
                    }
                } else {
                    editCart(item.dishId, item.count - 1);
                }
            }
            return item.dishId == e.target.dataset.id;
        });
        if (sub.count > 1) {
            sub.count--
        }
        renderHTML();
    }
    /*
          每一项的勾选
          修改数据
          渲染页面
        */
    if (e.target.className === 'checkbox') {
        // 查找数组中需要修改的这一项
        let info = cartList.find(item => {
            return item.dishId == e.target.dataset.id;
        });
        info.status = !info.status;
        renderHTML()
    }
    /*
          每一项的删除
          修改数据
          渲染页面
        */
    if (e.target.className === 'del') {
        if (confirm('你确定要删除这一项吗？')) {
            cartList = cartList.filter(item => {
                if (item.dishId == e.target.dataset.id)
                    delCart(item.dishId);

                return item.dishId != e.target.dataset.id;
            });
            renderHTML();
        }
    }
};

